<template>
	
	<view>
		<!-- 自定义组件 v-search-->
		<view class="v-search-box">
			<v-search @jumpsearchpage="jumpsearchpage"></v-search>
		</view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="(item,i) in swiperlist" :key="item.goods_id">
				<navigator :url="`/subpckA/good_detail/good_detail?goods_id=${item.goods_id}`" class="swiper-item">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 导航栏区域 -->
		<view class="navview">
		<!-- 需请求导航栏数据 再遍历渲染页面-->
			<view class="navcontent">
				<view class="navitem" v-for="(item,i) in navlist" :key="i" @click="jumpcate(item.name)">
					<image :src="item.image_src" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 楼层区域 -->
		<view class="floorview"  v-for="(item,i) in floorlist" :key="i">
			<!-- 楼层标题区域 -->
			<view class="floortitle">
					<image :src="item.floor_title.image_src" mode=""></image>
			</view>
			<!-- 楼层图片区域 -->
			<view class="floorpic">
				<!-- 楼层左侧图片 -->
				<navigator class="floorpic-item1" :url="item.product_list[0].url">
					<image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" ></image>
				</navigator>
				<!-- 楼层右侧图片 -->
				<view class="floorpic-item2">
					<view  v-for="(item1,i) in item.product_list" :key="i">
						<navigator class="" v-if="i !==0" :url="item1.url">
							<image :src="item1.image_src"  mode="" ></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图数据列表
				swiperlist:[],
				//定义一个导航栏数据列表
				navlist:[],
				//定义一个楼层数据列表
				floorlist:[],
			};
		},
		onLoad(){
			// 页面加载时,调用函数getswiperlist获取轮播图数据
			this.getswiperlist();
			// 页面加载时,调用函数getnavlist获取导航栏数据
			this.getnavlist();
			//页面加载时,调用函数getfloorlist获取楼层数据
			this.getfloorlist();
			//页面加载时，调用获取购物车徽标函数
			 this.showtabbarindex();
		},
		methods:{
			//获取购物车徽标回调函数
			showtabbarindex(){
				uni.setTabBarBadge({
					index:2,//此处为tabbar页面的索引
					text:uni.getStorageSync("total")||""
				})
			},
			//获取轮播图数据方法
			getswiperlist(){
				uni.showLoading({
					title:"数据加载中"
				})
				uni.request({
					
					url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
					method:'GET',
					success: ({data:res}) => {
						// 不写箭头函数则没有this
						// console.log(res);
						// console.log(this.swiperlist);
						this.swiperlist=res.message
						console.log(this.swiperlist);
						//每次请求数据，都要调用showtoast这个方法进行弹窗，很不方便，对这个方法进行封装
						// uni.showToast({
						// 	title:'数据加载成功',
						// 	duration:1500,
						// 	icon:'none'
						// })
						uni.$showmsg();
					},
					fail(err) {
						console.log(err);
						uni.$showmsg('数据加载失败');
						
					},
					complete() {
						uni.hideLoading();
						// console.log(this);
					}
				})
			},
			//获取导航栏数据方法
			getnavlist(){
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
					method:'GET',
					success: ({data:res}) => {
						// console.log(res);
						this.navlist=res.message;
						// 拿到了导航栏列表数据
						 console.log(this.navlist);
					}
				})
			},
			//跳转切换到tabbar页面
			jumpcate(item){
				// console.log(item);
				if(item=='分类'){
					//通过传递过来的参数 来判断是否跳转tabbar页面
					uni.switchTab({
						url:'/pages/cate/cate'
					})
				}
			},
			// 获取楼层数据
			getfloorlist(){
				uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
					method:'GET',
					success: ({data:res}) => {
						// console.log(res);
						// 数据赋值之前 挂载一个自定义属性 url
						res.message.forEach(floor=>{
							floor.product_list.forEach(prod=>{
								prod.url='/subpckA/good_list/good_list?'+prod.navigator_url.split('?')[1]
							})
						})
						this.floorlist=res.message
						console.log(this.floorlist);
					}
				})
			},
			//跳转搜索页面自定义事件回调
			jumpsearchpage(){
				uni.navigateTo({
					url:"/subpckA/search/search"
				})
			}
		}
	}
</script>

<style lang="scss">
	// 搜索栏样式(粘性定位)
	.v-search-box{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	// 轮播图样式
	swiper{
		height: 300rpx;
		.swiper-item{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	// 导航栏样式
	// 当子元素浮动后,会脱离文档流,此时使用margin 0 auto 进行居中则不生效
	//解决方案一，给子元素套一层盒子，盒子大小是子元素和的大小 然后对包裹元素的盒子进行居中 进而实现了子元素的居中
	// 解决方案二 直接设置子元素margin 自己计算
	.navview{
		// width: 340px;
		height: 155rpx;
		// border: 1px solid blue;
		.navcontent{
			width: 672rpx;
			margin: 0 auto;
			// border: 1px solid red;
			.navitem{
				float: left;
				margin: 15rpx 20rpx;
				// border: 1px solid red;
				image{
				// text-align: center;
					width: 128rpx;
					height: 140rpx;
				}
			}
		}
		.navcontent::after{
			content: '';
			display: block;
			clear: both;
		}
	}
	//
	.floorview{
		.floortitle{
			image{
				height: 60rpx;
				width: 100%;
			// display: flex;
			}
		}
		.floorpic{

			.floorpic-item1{
				float: left;
			}
			.floorpic-item2{
				font-size: 0px;
				
				image{
					margin: 10rpx 10rpx;
					float: left;
					width: 223rpx;
					height: 224rpx;
				}
			}
			.floorpic-item2::after{
				content: '';
				display: block;
				clear: both;
			}
		}


	}

	// .floorpic:first-child{
		
	// 		height: 540rpx;
	// 		width: 320rpx;
	// 		image{
	// 			width: 100%;
	// 			height: 100%;
	// 		}
	// 		// float: left;
		
	// }

</style>
